<template>
  <d2-container>
    <template slot="header">

      <!-- 选择器部门 -->
      <el-select v-model="examineListFormInline.departmentId" clearable placeholder="请选择部门" class="selector">
        <el-option v-for="(item,index) in allDepartment" :key="index" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <!-- 选择器指标 -->
      <el-select v-model="examineListFormInline.templateType" clearable placeholder="请选择考核类型" class="selector">
        <el-option v-for="item in allType" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>

      <!-- 搜索框 -->
      <el-input v-model="examineListFormInline.templateSearch" placeholder="请输入搜索内容" class="inputBox"></el-input>
       <el-button type="primary" @click="search" class="botton_souch">搜索 </el-button>
      <el-button type="primary" @click="reset" class="botton_souch">重置</el-button>
    </template>
    <!-- 按钮 -->
    <div class="cardBox">
      <div @click="create">
        <!-- 新建模板卡片 -->
        <el-card style="width:240px;height:200px;" class="box-card">
          <div slot="header" class="clearfix">
            <span></span>
          </div>
          新建模板卡片
        </el-card>
      </div>

      <!-- 模板卡片 -->
      <!-- <div v-for="item in templatelist" :key="item.id"> -->

      <el-card class="box-card" v-for="item in templatelist" :key="item.id">
        <div slot="header" class="clearfix">
          <span>{{ item.templateName }}</span>
        </div>

        部门:{{ item.department }}<br />
        类型:{{ item.type }}<br />
        创建时间:{{ item.createTime }}

        <br />

        <div class="btn1">
          <el-button @click="deletetemplate(item.id)" type="text">删除</el-button>
          <!-- <el-button type="text">复制</el-button> -->
          <el-button @click="modify(item.id)" type="text">修改</el-button>
        </div>

      </el-card>
      <!-- </div> -->

    </div>
  </d2-container>
</template>

<style scoped>
  .cardBox {
    display: flex;
    flex-wrap: wrap
  }

  .btn1 {
    margin: auto;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 19%;
    margin-top: 30px;
    margin-left: 65px;
    float: left;
  }

  .moban {
    float: left;
    width: 25%;
    margin-right: 5%;
  }

  .block {
    float: right;
  }

  .inputBox {
    margin-left: 80px;
    width: 25%;
  }
</style>

// 组件js
<script>
export default {
  data () {
    return {
      templatelist: [],
      // 部门列表对象
      appraisalTemplate: {
        id: 0
      },
      size: 'mini',
      // 选择器部门
      allDepartment: [],
      value: '',
      // 选择考核状态
      allType: ['部门考核', '个人考核'],
      dept: {
        dept: ''
      },
      value1: '',
      // 搜索框查询
      examineListFormInline: {
        departmentId: '',
        templateType: '',
        templateSearch: ''
      }
    }
  },
  // 展开页面执行操作
  created () {
    // 查询后端信息
    this.getdata()
  },
  watch: {
    $route (to, from) {
      console.log(to, from)
    }
  },
  // 分页
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 查询部门考核模板列表信息方法
    getdata (parameter) {
      this.$request({
        url: 'AppraisalTemplate/findAllTemplate',
        method: 'post',
        data: this.dept
      })
        .then((res) => {
          this.templatelist = res
        })
        .catch((err) => {
          console.log(err)
        })
      this.$request({
        url: 'dept/findAllDept',
        method: 'post',
        data: null
      }).then(res => {
        this.allDepartment = res
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转新建模板页面
    create () {
      this.$router.push('/newtemplate')
    },
    // 跳转修改模板页面
    modify (id) {
      this.$router.push({
        name: 'newtemplate',
        query: {
          id: id
        }
      })
    },
    // 删除模板
    deletetemplate (id) {
      this.appraisalTemplate.id = id
      this.$request({
        url: 'AppraisalTemplate/deleteTemplate',
        method: 'post',
        data: this.appraisalTemplate
      })
        .then((res) => {
          // location. reload()
          this.getdata()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    reset () {
      this.examineListFormInline.departmentId = ''
      this.examineListFormInline.templateType = ''
      this.examineListFormInline.templateSearch = ''
      this.getdata()
    },
    search () {
      this.$request({
        url: 'AppraisalTemplate/findAllTemplateBySearch',
        method: 'post',
        data: this.examineListFormInline
      })
        .then((res) => {
          this.templatelist = res
        })
        .catch((err) => {
          console.log(err)
        })
      this.$request({
        url: 'dept/findAllDept',
        method: 'post',
        data: null
      }).then(res => {
        this.allDepartment = res
      }).catch(err => {
        console.log(err)
      })
    }

  }
}
</script>
